<template>
<!--  <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">-->
<!--    <el-radio-button :value="false">展开</el-radio-button>-->
<!--    <el-radio-button :value="true">折叠</el-radio-button>-->
<!--  </el-radio-group>-->
  <el-menu
      default-active="/message/mymessage"
      class="el-menu-vertical-demo"
      router
  >
<!--    :collapse="isCollapse"-->
<!--    @open="handleOpen"-->
<!--    @close="handleClose"-->
    <el-menu-item index="/message/mymessage">
      <el-icon><icon-menu /></el-icon>
      <template #title>我的消息<div class="badge" v-if="noReadMessageCount > 0">{{noReadMessageCount}}</div></template>
    </el-menu-item>
    <el-menu-item index="/message/replytome">
      <el-icon><icon-menu /></el-icon>
      <template #title>回复我的</template>
    </el-menu-item>
    <el-menu-item index="/message/atme">
      <el-icon><icon-menu /></el-icon>
      <template #title>@我的</template>
    </el-menu-item>
    <el-menu-item index="/message/receivelikes">
      <el-icon><icon-menu /></el-icon>
      <template #title>收到的赞</template>
    </el-menu-item>
<!--    <el-menu-item index="/message/systemnotify">-->
<!--      <el-icon><icon-menu /></el-icon>-->
<!--      <template #title>系统通知</template>-->
<!--    </el-menu-item>-->
    <el-menu-item index="/message/messagesettings">
      <el-icon><icon-menu /></el-icon>
      <template #title>消息设置</template>
    </el-menu-item>
  </el-menu>
</template>
<script setup>
import { ref } from 'vue'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import emitter from "@/utils/emitter.js";
const noReadMessageCount = ref(0)
emitter.on("updateNoReadCount",(val)=>{
  noReadMessageCount.value = val
})

// // const isCollapse = ref(false)
// const handleOpen = (key, keyPath) => {
//   console.log(key, keyPath)
// }
// const handleClose = (key, keyPath) => {
//   console.log(key, keyPath)
// }
</script>
<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  border-radius: 5px;
  width: 190px;
  min-height: 650px;
}
.badge{
  margin-left: 30px;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  padding: 0;
  border-radius: 50%;
  color: #fff;
  background-color: #ff3c3c;
}
</style>